import React, { Component } from 'react';
import {
  StyleSheet, View, Dimensions, Text,
} from 'react-native';

class PositionAbsolute extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={styles.contain}>
        <View style={styles.absolute}>
          <Text>111111</Text>
          <Text>PositionAbsolute</Text>
        </View>

        <View style={styles.bottomView}>
          <Text style={styles.bottomText}>提交</Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  contain: {
    backgroundColor: 'yellow',
    flex: 1,
  },
  absolute: { // 使用方式和css一致
    ...StyleSheet.absoluteFill, // 一种非常常见的模式是创建具有绝对位置和零位置
    // （位置：“绝对”，左：0，右：0，上：0，下：0）的覆盖，因此绝对填充可以用于方便和减少重复样式的重复
    backgroundColor: 'green',
    height: 200,
    width: 200,
    right: 5,
    top: 35,
  },
  // absolute: { // 使用方式和css一致
  //   position: 'absolute', // position默认是'relative
  //   backgroundColor: 'green',
  //   height: 200,
  //   width: 200,
  //   right: 5,
  //   top: 35,
  // },
  bottomView: {
    position: 'absolute', // position默认是'relative
    backgroundColor: 'blue',
    height: 50,
    width: Dimensions.get('window').width,
    left: 0,
    bottom: 0,
    display: 'flex', // 只支持'flex'和'none'两个值，这里不是用flex:1
    justifyContent: 'center',
    alignItems: 'center',
  },
  bottomText: {
    color: 'white',
  },
});
export default PositionAbsolute;
